<template>
  <view class="p-[30rpx] bg-white">
    <view class="personal-info-card">
      <view class="card-header">
        <!-- <view class="header-icon">
          <IconFont font-class-name="iconfont" class-prefix="icon" name="yonghuhuaxiang" size="24" color="#ffffff" />
        </view> -->
        <text class="header-title">个人健康档案</text>
      </view>

      <view class="text-none has" v-if="currentInfo?.recordid && currentInfo?.idNumber">已认证</view>
      <view class="text-none" v-else>未认证</view>

      <view class="info-grid">
        <view class="info-item">
          <text class="info-label">姓名</text>
          <text class="info-value">{{ (currentMember?.name) || " 暂无" }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">身份证号</text>
          <text class="info-value">{{ currentMember?.idcard }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">联系电话</text>
          <text class="info-value">{{ (currentMember?.phone) || " 暂无" }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">档案编号</text>
          <text class="info-value">{{ currentInfo?.recordid || " 暂无" }}</text>
        </view>
      </view>
    </view>
    <view className="flex justify-between items-center mb-[40rpx]">
      <view className="flex items-center">
        <IconFont font-class-name="iconfont" class-prefix="icon" name="yonghuhuaxiang" size="30" color="#003399" />
        <text className="text-[36rpx text-gray-800 ml-[10rpx]">健康画像</text>
      </view>
      <view className="bg-blue-50 px-[30rpx] py-[15rpx] rounded-full">
        <text className="text-[28rpx] text-blue-500">2025年7月汇总</text>
      </view>
    </view>
    <view class="flex justify-between">
      <view class="flex-1 flex flex-col items-center border-r border-gray-200 py-[20rpx]">
        <text class="text-[56rpx] font-bold text-blue-500 mb-[15rpx]">31</text>
        <text class="text-[28rpx] text-gray-600">居家医疗</text>
      </view>

      <view class="flex-1 flex flex-col items-center border-r border-gray-200 py-[20rpx]">
        <text class="text-[56rpx] font-bold text-blue-500 mb-[15rpx]">0</text>
        <text class="text-[28rpx] text-gray-600">居家护理</text>
      </view>

      <view class="flex-1 flex flex-col items-center py-[20rpx]">
        <text class="text-[56rpx] font-bold text-blue-500 mb-[15rpx]">0</text>
        <text class="text-[28rpx] text-gray-600">家庭服务</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { IconFont } from "@nutui/icons-vue-taro";
import { onMounted, ref, computed } from "vue";
import { localStg } from "@/utils";
import { useDemographicInfoStore } from "@/store/modules/demographic";
import { request } from "@/service/request";
import { useAuthStore } from "@/store";

const authStore = useAuthStore();
const currentMember = computed(() => authStore.getCurFamilyMember)

// console.log("userInfo ---000", currentMember.value);
// setTimeout(() => {
//   console.log("userInfo ---111", currentMember.value);
// }, 3000);

const demographicStore = useDemographicInfoStore();
// 使用 any 类型以访问扩展属性
const currentInfo = computed(() => demographicStore.currentInfo as any);

const form = ref<any>({});

const getCardNo = computed(() => {
  let idcard = currentInfo.value?.idcard || form.value?.idcard;
  if(idcard){
    return idcard;
  }
  idcard = currentInfo.value?.idNumber || form.value?.idNumber;
  if(idcard){
    return idcard;
  }
  return " 暂无";
});

onMounted(async () => {
  // 首先尝试从 store 中获取数据
  console.log("从 store 读取 currentInfo:", currentInfo.value);
  
  // 如果 store 中没有数据，尝试从本地存储加载
  if (!currentInfo.value) {
    demographicStore.getDemographicInfoFromStorage();
    console.log("从本地存储读取后的 currentInfo:", currentInfo.value);
  }
  
  // 如果还是没有数据，从本地存储读取到 form
  const obj = localStg.get("demographicInfo");
  if (obj) {
    form.value = obj;
    console.log("从 localStg 读取到 form:", form.value);
  } else {
    // 如果本地存储也没有，从接口获取
    const params = new URLSearchParams(window.location.search);
    const idcard = params.get("idcard");
    
    if (idcard) {
      const result = await request.get<any>(
        "/nurse_user/nurseUser/list",
        {
          idcard: idcard,
        },
        { useErrMsg: true }
      );

      if (result?.success?.records?.[0]) {
        const item = result.success.records[0];
        form.value = {
          id: item.id,
          idNumber: item.idcard,
          name: item.name,
          tel: item.phone,
        }
        console.log("从接口获取到 form:", form.value);
      }
    }
  }
  
  // 打印最终的数据状态
  console.log("最终 currentInfo:", currentInfo.value);
  console.log("最终 form:", form.value);
});
</script>
<style scoped>
.personal-info-card {
  background: #ffffff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(39, 197, 48, 0.08);
  border: 2rpx solid rgba(39, 197, 48, 0.1);
}

.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 32rpx;
  padding: 24rpx;
  border-bottom: 2rpx solid #f0f9f0;
  background-color: #079a0e;
}

.header-icon {
  width: 48rpx;
  height: 48rpx;
  background: linear-gradient(135deg, #27c530 0%, #22b82a 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
  padding: 32rpx;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.info-label {
  font-size: 24rpx;
  color: #999999;
  font-weight: 500;
}

.info-value {
  font-size: 28rpx;
  color: #1a1a1a;
  font-weight: 600;
  word-break: break-all;
}
.text-none {
  position: absolute;
  top: 180rpx;
  left: 128rpx;
  z-index: 1;
  font-size: 18rpx;
  color: #f73636;
  font-weight: 500;
  border: 3rpx solid #f73636;
  /* border-radius: 50%; */
  /* width: 100rpx;
  height: 100rpx; */
  padding: 4rpx 8rpx;
  /* transform: rotate(45deg); */
  display: flex;
  align-items: center;
  justify-content: center;
  &.has {
    color: #27c530;
    border: 3rpx solid #27c530;
  }
}
</style>
